<template>
  <div class="h-p100 w-p100">
    <div class="box box-ver bc-fff w-p100 h-p100">
      <div @click="$router.go(-1)"  class="header box box-ac">
        <div class="icon icon-back"></div>
        <div class="box-f1 tx-c">激活驾照</div>
      </div>
      <div class="box box-ac line">
        <div>令牌：</div>
        <input class="box-f1" v-model="vipCode" placeholder="请输入24位令牌" type="text">
      </div>
      <div @click="vipActivation()" class="button">立即激活</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'vipActivation',
  data () {
    return {
      vipCode: ''
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
  },
  methods: {
    vipActivation () {
      if (this.vipCode.length !== 24) {
        return this.$tools.openToast({
          msg: '请输入正确的24位令牌',
          duration: 3000
        })
      }
      this.$http({
        method: 'post',
        url: `${this.$config.apiBase}/api/v0/vip/activation`,
        data: {
          _id: this.vipCode,
          uid: this.userInfo._id
        }
      }).then(res => {
        if (res.status === 1) {
          this.$store.dispatch('updateUserInfo')
          this.$tools.openToast({
            msg: '激活成功',
            duration: 3000
          })
        }
      })
    },
    goDetail (item) {
      this.$router.push({
        path: '/detail',
        query: {
          id: item._id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config.scss';
.button{
  margin:.5rem auto;
  width:80%;
  padding:.2rem 0;
  background-color:$themeColor;
  color:#FFF;
  text-align: center;
}
.line{
  width:80%;
  margin:0 auto;
  margin-top:.5rem;
  font-size:.32rem;
  input{
    outline: none;
    padding:.2rem;
    border:1px solid #999;
  }
}
</style>
